<template>
    <div class="bod">
        <div class="header">
            <p class="headerP">
                长按保存图片
            </p>
            <!-- <img :src="src2" alt=""> -->
        </div>
        <div class="lunbotu">
             <swiper :options="swiperOption" ref="mySwiper" class="swiper-wrapper">
                    <!-- slides -->
                    <swiper-slide class="bg">
                           <div id="capture1" class="new_bg1" v-show="showQrcode1">
                                   <div class="top-content" >
                                      <p class="text text-name">我是{{UsName}}</p>
                                     </div>
                                <div id="weml" class="ewmQr1">
                                      <vue-qr  :logoSrc="src2"  :text="text" :size="150" :margin="0"   id="ewm" :logoScale="0.3" :callback="test1" :whiteMargin="true" ></vue-qr>
                                </div>
                                <div class="Title">
                                    <p class="TitleP1">微传媒广告引流系统</p>
                                    <!-- <p class="TitleP2">扫一扫,享受免费做广告的快感</p> -->
                                     <p class="TitleP2">扫一扫,做软文广告,享快速引流</p>
                                </div>
                                <div class="shuoming">
                                    <p>微传媒是一款专业帮您免费做广告的软件系统</p>
                                    <p>微传媒瞬间将您的广告植入微信10亿用户手机中</p>
                                    <p>这一次 我们颠覆整个广告营销业</p>
                                </div>
                            </div>
                           <img id="predict_img1" class="hide">
                    </swiper-slide>
                       <swiper-slide >
                         <div  class="new_bg3" v-show="showQrcode2">
                             <div class="bgbs" id="capture3">
                                  <div class="wcmmingp_left">
                                     <vue-qr class="ewmmp" :logoSrc="src2"  :text="text" :size="150" :margin="0"   :logoScale="0.3" :callback="test3" :whiteMargin="true" ></vue-qr>
                                     <p class="sys">微信扫一扫</p>
                                     <p class="sys">免费做广告</p>
                                 </div>
                                <div class="wcmmingp_Right">
                                    <h1>微传媒广告引流系统</h1>
                                    <p>
                                        一款<span class="coloFont">专业</span>帮您<span class="coloFont">免费做广告</span>的软件系统<span class="coloFont">瞬间</span>
                                        将您的广告植入微信<span class="coloFont">10亿</span>用户手中微传媒<span class="coloFont">广告引流</span>，颠覆整个广告<span class="coloFont">
                                        营销行业</span>
                                    </p>
                                </div>
                             </div>
                         </div>
                         <img id="predict_img3" class="hide">
                         <div class="shuoming1">
                             长按保存图片后可以在文章插入广告时使用
                         </div>
                    </swiper-slide>
                    <swiper-slide v-if="qrPay==2">
                        <div id="capture2" class="new_bg1" v-show="showQrcode"><!--高级-->
                            <div class="top-content" >
                                      <p class="text text-name">我是{{UsName}}</p>
                            </div>
                            <div id="weml" class="ewmQr1">
                                    <vue-qr  :logoSrc="src2"  :text="text1" :size="150" :margin="0"   id="ewm" :logoScale="0.3" :callback="test2" :whiteMargin="true" ></vue-qr>
                            </div>
                        </div>
                         <img id="predict_img2" class="hide">
                    </swiper-slide>
                    <swiper-slide v-else>
                        <div id="capture4" class="new_bg1" v-show="showQrcode4">
                            <div class="top-content" >
                                      <p class="text text-name">我是{{UsName}}</p>
                            </div>
                            <div id="weml" class="ewmQr1">
                                    <vue-qr  :logoSrc="src2"  :text="text1" :size="150" :margin="0"   id="ewm" :logoScale="0.3" :callback="test4" :whiteMargin="true" ></vue-qr>
                            </div>
                        </div>
                         <img id="predict_img4" class="hide">
                    </swiper-slide>
              </swiper>
        </div>
    </div>
</template>
<style scoped>
  @import "../../assets/ThePublic/shuffling.css";
  .shuoming1{
        font-size: 12px;
    color: #2691ff;
    position: absolute;
    top: 55%;
    background: #ffffff;
    width: 100%;
    height: 32px;

  }
      #ewm{
         padding: 10px;
         background: #ffffff;
         width: 50%;
         position: fixed;
         top: 40%;
         left: 25%;
         position: relative;
    }
  .coloFont{
      color: #ec651a;
  }
  .wcmmingp_Right p{
      font-size: 12px;
      text-align: left;
      margin-top: 3%;
      margin-left: 15px;
      line-height: 20px;
  }
  .wcmmingp_Right h1{
      font-size: 19px;
  }
  .sys{
      font-size: 11px;
  }
  .bgbs{
       background: #ffffff;
  }
  .bgbs:after{
    display:block;
    clear:both;content:"";
    visibility:hidden;
    clear: both;
  }
  .ewmmp{
      width: 73px;
      height: 73px;
      border: 1px solid black;
      margin-top: 25px;
      margin-left: 4px;
      margin-bottom: 5px;
  }
  .wcmmingp_left{
      width: 25%;
      height: 169px;
      float: left;
  }
  .wcmmingp_Right{
      float: left;
      width: 75%;
      padding-top: 9%;
  }
</style>
<script>
import VueQr from 'vue-qr'
import html2canvas from 'html2canvas';
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
     components: {
            swiper,
            swiperSlide,
            VueQr
     },
    data () {
        return {
            swiperOption: {//v-swiper
                // autoplay: true,
                // pagination: {
                //     el: '.swiper-pagination',
                // }
            },
            headline: {
                autoplay: {
                    delay: 1
                },
                direction: 'vertical',
            },
           showQrcode:true,
           showQrcode1:true,
           showQrcode2:true,
           showQrcode4:true,
           src2:require("../../assets/personal/images/logo_new.png"),
           text:"",
           text1:'',
           UsName:'',
           qrPay:''

       }
    },
    beforeCreate(){
        this.$http.get(this.APIURL_PREFIX+'/api/wap/accounts/info').then((response) => {
            this.text="http://"+window.location.host+"/wap/wx/login?fk=1-7-"+response.data.data.id+"-0 ",
            this.text1="http://"+window.location.host+"/wap/wx/login?fk=1-8-"+response.data.data.id+"-0 ",
            this.UsName=response.data.data.nickname
            this.qrPay=response.data.data.qrPay
            console.log(this.qrPay)
        }).catch(function(err){
            console.log(err)
        });
    },
   mounted(){
       console.log(this.src2)
     this.getwxconfig();
   },
    methods: {

      getwxconfig(){
        var vm= this;
        console.log(vm);
        this.$http.get(this.APIURL_PREFIX+"/api/wxs/config?url="+escape(location.href.split('#')[0])).then((response) => {
          console.log(response.data);
        var appid = 'wx488ae3f57360b7ea';
        wx.config({
          debug: false,
          appId: appid,
          timestamp: response.data.data.timestamp,
          nonceStr: response.data.data.noncestr,
          signature: response.data.data.signature,
          jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','onMenuShareQZone','scanQRCode']
        });
        wx.ready(function(){
          wx.onMenuShareTimeline({
            title: "首象共享个人二维码",
            link: "http://"+window.location.host+"/wap/wx/login?fk=1-43-"+localStorage.headid+"-"+vm.shopsID,
            imgUrl:"http://static.ruitaowang.com/attached/file/2018/07/18/20180718153138439.jpg",
            desc:"首象共享个人二维码",
            success: function () {
            },
            cancel: function () {
            }
          });
          wx.onMenuShareAppMessage({
            title: "首象共享个人二维码",
            link: "http://"+window.location.host+"/wap/wx/login?fk=1-43-"+localStorage.headid+"-"+vm.shopsID,
            imgUrl:"http://static.ruitaowang.com/attached/file/2018/07/18/20180718153138439.jpg",
            desc:"首象共享个人二维码",
            success: function () {
            },
            cancel: function () {
            }
          });
          wx.onMenuShareQQ({
            title: "首象共享个人二维码",
            link: "http://"+window.location.host+"/wap/wx/login?fk=1-43-"+localStorage.headid+"-"+vm.shopsID,
            imgUrl:"http://static.ruitaowang.com/attached/file/2018/07/18/20180718153138439.jpg",
            desc:"首象共享个人二维码",
            success: function () {
            },
            cancel: function () {
            }
          });
          wx.onMenuShareWeibo({
            title: "首象共享个人二维码",
            link: "http://"+window.location.host+"/wap/wx/login?fk=1-43-"+localStorage.headid+"-"+vm.shopsID,
            imgUrl:"http://static.ruitaowang.com/attached/file/2018/07/18/20180718153138439.jpg",
            desc:"首象共享个人二维码",
            success: function () {
            },
            cancel: function () {
            }
          });
          wx.onMenuShareQZone({
            title: "首象共享个人二维码",
            link: "http://"+window.location.host+"/wap/wx/login?fk=1-43-"+localStorage.headid+"-"+vm.shopsID,
            imgUrl:"http://static.ruitaowang.com/attached/file/2018/07/18/20180718153138439.jpg",
            desc:"首象共享个人二维码",
            success: function () {
            },
            cancel: function () {
            }
          });

        });
      }).catch(function(err){
          console.log(err)
        });

      },
        // test(dataUrl,id){
        //     let content_html = document.getElementById('capture');　　　　//要转化的div
        //     // let width = content_html.offsetWidth;
        //     // let height = content_html.offsetHeight;
        //     // let offsetTop = content_html.offsetTop;
        //     // let canvas = document.createElement("canvas");
        //     // let context = canvas.getContext('2d');
        //     // let scaleBy = Math.ceil(window.devicePixelRatio);
        //     // canvas.width = width*scaleBy;
        //     // canvas.height = (height+offsetTop)*scaleBy;
        //     // context.scale(scaleBy,scaleBy);
        //     // var opts = {
        //     //     allowTaint:true,//允许加载跨域的图片
        //     //     tainttest:true, //检测每张图片都已经加载完成
        //     //     scale:scaleBy, // 添加的scale 参数
        //     //     canvas:canvas, //自定义 canvas
        //     //     logging: false, //日志开关，发布的时候记得改成false
        //     //     width:width, //dom 原始宽度
        //     //     height:height //dom 原始高度
        //     // };
        //     html2canvas(content_html, {scale:2,logging:false,useCORS:true}).then(function(canvas) {
        //         document.querySelector("#capture").appendChild(canvas);
        //         var dataUrl = canvas.toDataURL();
        //         $("#predict_img").attr("src",dataUrl).removeClass("hide");
        //     });
        //     this.showQrcode=false;
        // },
        test1(dataUrl,id){
            // console.log(dataUrl)
             let content_html = document.getElementById('capture1');　　　　//要转化的div
            // console.log('回调开始的img地址',$(content_html).find('#ewm').find("img").attr("src"))
            setTimeout(() => {
                console.log($(content_html).find('#ewm').find("img").attr("src"))
                html2canvas(content_html, {scale:2,logging:false,useCORS:true}).then(function(canvas) {
                    console.log(canvas)
                    document.querySelector("#capture1").appendChild(canvas);
                    var dataUrl = canvas.toDataURL();
                    console.log(dataUrl)
                    $("#predict_img1").attr("src",dataUrl).removeClass("hide");
                });
                this.showQrcode1=false;
            }, 100);
            
       },
       test2(dataUrl,id){
            let content_html = document.getElementById('capture2');　　　　//要转化的div
            setTimeout(() => {
                 html2canvas(content_html, {scale:2,logging:false,useCORS:true}).then(function(canvas) {
                document.querySelector("#capture2").appendChild(canvas);
                var dataUrl = canvas.toDataURL();
                $("#predict_img2").attr("src",dataUrl).removeClass("hide");
            }); 
             this.showQrcode=false;
            }, 100);
          
       },
        test3(dataUrl,id){
            let content_html = document.getElementById('capture3');　　　　//要转化的div
            setTimeout(() => {
                html2canvas(content_html, {scale:2,logging:false,useCORS:true}).then(function(canvas) {
                document.querySelector("#capture3").appendChild(canvas);
                var dataUrl = canvas.toDataURL();
                $("#predict_img3").attr("src",dataUrl).removeClass("hide");
            }); 
            this.showQrcode2=false;
            }, 100);
            
       },
        test4(dataUrl,id){
            let content_html = document.getElementById('capture4');　　　　//要转化的div
           setTimeout(()=>{
             html2canvas(content_html, {scale:2,logging:false,useCORS:true}).then(function(canvas) {
                document.querySelector("#capture4").appendChild(canvas);
                var dataUrl = canvas.toDataURL();
                $("#predict_img4").attr("src",dataUrl).removeClass("hide");
            });
             this.showQrcode4=false;
           },100)
           
       }
    }
}
</script>
